<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
    <!-- CSS: implied media="all" -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/diQuery-collapsiblePanel.css">
    <link rel="stylesheet" href="/css/jquery.qtip.css">

    <link type="text/css" rel="stylesheet" href="css/treeview.css">
    <script src="js/libs/yahoo-dom-event.js"></script>
    <script src="js/libs/treeview-min.js"></script>
    <!-- All JavaScript at the bottom, except for Modernizr and Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries -->
    <script src="js/libs/modernizr-1.7.min.js"></script>
    <script src="js/libs/respond.min.js"></script>
</head>
<body>
    <div id="container">
        <header>

    </header>
        <div id="toolbar">
            <a class="undo" href="#">Undo</a>
            <a class="redo" href="#">Redo</a>
        </div>
        <div id="toolbox">
            <ul id="elements">
                <li class="cmd" data-command="iphone.phone">
                    <div>
                        iPhone</div>
                </li>
                <li class="cmd" data-command="iphone.button">
                    <div>
                        Button</div>
                </li>
                <li class="cmd" data-command="common.text">
                    <div>
                        Text Area</div>
                </li>
                <li class="cmd" data-command="common.checkbox">
                    <div>
                        Check box</div>
                </li>
                <li class="cmd" data-command="common.container">
                    <div>
                        Container</div>
                </li>

                <li class="cmd" data-command="dialogs.confirmation">
                    <div>
                        Confirmation Dialog</div>
                </li>
            </ul>
        </div>
        <div id="main" role="main" data-type="view">

        </div>
        <div id="right_sidebar">
            <div>
                <label for="zoom">Zoom:</label><select id='zoom'>
                    <option value="1" selected>100%</option>
                    <option value="1.1">110%</option>
                    <option value="1.2">120%</option>
                    <option value="1.3">130%</option>
                    <option value="1.4">140%</option>
                    <option value="1.5">150%</option>
                    <option value="1.6">160%</option>
                    <option value="1.7">170%</option>
                    <option value="1.8">180%</option>
                    <option value="1.9">190%</option>
                    <option value="2">200%</option>
                </select>
            </div>
            <div id="actionDesigner"></div>
            <div id="propertyDesigner"></div>
            <div id="outline" class="collapsibleContainer yui-skin-sam" title="Document outline">
                <div id="elements_tree"></div>
            </div>
            <div id="debug">
                <div>
                    FPS: <span id="fps"></span>
                </div>
            </div>
            <div id="modelOutput">
                <input type="button" id="generateModel" value="Generate Model"/>
                <textarea id="model"></textarea>
            </div>
            <div id="testBed_container">
                <div>TestBed:</div>
            </div>
        </div>
        <footer>

    </footer>
    </div>
    <!--! end of #container -->
    <!-- JavaScript at the bottom for fast page loading -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>-->
    <script>        window.jQuery || document.write("<script src='js/libs/jquery-1.6.js'>\x3C/script>")</script>
    <!-- scripts concatenated and minified via ant build script-->
    <script src="js/libs/diQuery-collapsiblePanel.js"></script>
    <script src="js/libs/jquery.tmpl.js"></script>
    <script src="js/libs/jquery.qtip.js"></script>
    <script src="js/libs/jquery.mousewheel.min.js"></script>

    <script src="js/plugins.js"></script>
    <script src="js/libs/namespace.js"></script>
    <script src="js/script.js"></script>
    <script src="js/libs/shortcut.js"></script>
    <script src="js/mylibs/framework/OrderedCollection.js"></script>
    <script src="js/mylibs/framework/Properties.js"></script>
    <script src="js/mylibs/framework/ActionBag.js"></script>
    <script src="js/mylibs/framework/Clipboard.js"></script>
    <script src="js/mylibs/framework/Color.js"></script>
    <script src="js/mylibs/framework/ContextModifier.js"></script>
    <script src="js/mylibs/framework/Brush.js"></script>
    <script src="js/mylibs/framework/Shadow.js"></script>
    <script src="js/mylibs/framework/Resources.js"></script>
    <script src="js/mylibs/framework/EventHelper.js"></script>
    <script src="js/mylibs/framework/DrawBuffer.js"></script>
    <script src="js/mylibs/framework/PropertyEditor.js"></script>
    <script src="js/mylibs/framework/Observer.js"></script>
    <script src="js/mylibs/framework/Box.js"></script>
    <script src="js/mylibs/framework/UIElement.js"></script>
    <script src="js/mylibs/framework/Container.js"></script>
    <script src="js/mylibs/framework/NullContainer.js"></script>
    <script src="js/mylibs/framework/Layer.js"></script>
    <script src="js/mylibs/framework/UIElementDecorator.js"></script>
    <script src="js/mylibs/framework/ImageElement.js"></script>
    <script src="js/mylibs/framework/Rectangle.js"></script>
    <script src="js/mylibs/framework/Font.js"></script>
    <script src="js/mylibs/framework/FrameRateCounter.js"></script>
    <script src="js/mylibs/framework/TextBuffer.js"></script>
    <script src="js/mylibs/framework/ContextExtensions.js"></script>
    <script src="js/mylibs/framework/DropVisualization.js"></script>

    <script src="js/mylibs/framework/text/InplaceEditor.js"></script>
    <script src="js/mylibs/framework/text/TextMeasure.js"></script>
    <script src="js/mylibs/framework/text/Tokenizer.js"></script>

    <script src="js/mylibs/framework/commands/Command.js"></script>
    <script src="js/mylibs/framework/commands/CommandManager.js"></script>
    <script src="js/mylibs/framework/commands/Align.js"></script>

    <div id="editor-checkbox" style="display: none">
        <input type="checkbox" id="{{= controlId }}"/>
        <label for="{{= controlId }}">{{= description }}</label>

        <script type="text/javascript">
            $("#editor-checkbox")
                .data("init", function() {
                    $("#{{= controlId }}")
                        .change(function(data){
                            $("#{{= mediatorHolder }}").data("mediator").setValueByCommand($(this).is(':checked'));
                        })
                        .data("toggle", function(value){
                            if (value == "true"){
                                $("#{{= controlId }}").prop("checked", true);
                            }
                            else {
                                $("#{{= controlId }}").prop("checked", false);
                            }
                        });

                        $("#{{= controlId }}").data("toggle")("{{= value }}");
                })
                .data("setValue", function(event){
                    $("#{{= controlId }}").data("toggle")("" + event.newValue);
                });
        </script>
    </div>
    <div id="editor-dropdown" style="display: none">
        <label for="{{= controlId }}">{{= description }}</label>
        <select id="{{= controlId }}"></select>

        <script type="text/javascript">
            $("#editor-dropdown")
                .data("init", function() {
                    var decoded = $("<div/>").html("${possibleValues}").text();
                    var possibleValues = $.parseJSON(decoded);

                    $.each(possibleValues, function(key, value){
                        $('#${controlId}').append($('<option></option>').attr("value", key).text(value));
                    });

                    $("#{{= controlId }}")
                        .change(function(data){
                            $("#{{= mediatorHolder }}").data("mediator").setValueByCommand($(this).val());
                    }).val("{{= value }}");
                })
                .data("setValue", function(event){
                    $("#{{= controlId }}").val(event.newValue);
                });
        </script>
    </div>
    <div id="editor-textbox" style="display: none">
        <label for="{{= controlId }}">{{= description }}</label>
        <input type="text" id="{{= controlId }}">

        <script type="text/javascript">
            $("#editor-textbox")
                .data("init", function() {
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");
                    $("#{{= controlId }}").keyup(function(event){
                        mediator.setValue($(this).val());
                    }).change(function(){
                        mediator.setValueByCommand($(this).val());
                    }).val("{{= value }}");
                })
                .data("setValue", function(event){
                    $("#{{= controlId }}").val(event.newValue);
                });
        </script>
    </div>
    <div id="editor-pushbutton" style="display: none">
        <img id="{{= controlId }}" src=""/>

        <script type="text/javascript">
            $("#editor-pushbutton")
                .data("init", function() {
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");
                    var arg = mediator.getArgument();
                    $("#{{= controlId }}")
                        .click(function(){
                            var value = $(this).data("value");
                            value = !value;
                            $(this).data("value", value);
                            mediator.setValueByCommand(value);
                        })
                        .attr("src", arg["{{= value }}"])
                        .data("value", "{{= value }}" == "true");
                }).data("setValue", function(event){
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");
                    var arg = mediator.getArgument();
                    $("#{{= controlId }}").attr("src", arg[event.newValue]);
                });
        </script>
    </div>
    <div id="editor-spinner" style="display: none">
        <input id="{{= controlId }}" type="text" class="editor-spinner-control"/>
        <img id="{{= controlId }}_up" src="/img/ui/spinner-up.png"/>
        <img id="{{= controlId }}_down" src="/img/ui/spinner-down.png"/>

        <script type="text/javascript">
            $("#editor-spinner")
                .data("init", function() {
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");

                    var getValue = function(){
                        return new Number($("#{{= controlId }}").val());
                    };
                    var changeValue = function(to){

                        var $element = $("#{{= controlId }}");
                        var result = mediator.validateNewValue(to);
                        if (result.ok) {
                            $element.val(to).data("oldValue", to);
                            mediator.setValueByCommand(to);
                        }
                        else {
                            $element.val($element.data("oldValue"));
                            for (var i in result.errors){
                                alert(result.errors[i]);
                            }
                        }
                        return true;
                    };

                    $("#{{= controlId }}_up").click(function(){
                       changeValue(getValue() + 1);
                    });
                    $("#{{= controlId }}_down").click(function(){
                        changeValue(getValue() - 1);
                    });
                    $("#{{= controlId }}").change(function(){
                        changeValue(getValue());
                    });

                    $("#{{= controlId }}").val("{{= value }}").data("oldValue", "{{= value }}");
                }).data("setValue", function(event){
                    $("#{{= controlId }}").data("oldValue", event.oldValue).val(event.newValue);
                });
        </script>
    </div>
    <div id="editor-imagepicker" style="display: none">
        <label for="{{= controlId }}_picker">{{= description }}</label>
        <img id="{{= controlId }}_picker" src="/img/properties/choose-image.png"/>
        <img id="{{= controlId }}" src=""/>

        <script type="text/javascript">
            $("#editor-imagepicker")
                .data("init", function() {
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");

                    $("#{{= controlId }}_picker").qtip({
                        id: "{{= controlId }}_tooltip",
                        overwrite: false,
                        content: {
                            text: "Loading...",
                            ajax: {
                                url: "/content/icons/" + mediator.getArgument(),
                                success: function(data, status){
                                    var qtip = this;
                                    this.set("content.text", data);
                                    $("#ui-tooltip-{{= controlId }}_tooltip .content-image").click(function(event){
                                        if($(this).attr("data-role")==='null'){
                                            mediator.setValueByCommand(null);
                                        }else{
                                            mediator.setValueByCommand($(this).attr("src"));
                                        }
                                        qtip.hide(event);
                                    });
                                }
                            },
                            title: {text: "Choose an image", button: "Close"}
                        },
                        show: {event: "click", solo: true},
                        hide: {event: "unfocus"},
                        position: {my: "top center", at: "bottom center"},
                        style: {classes: "ui-tooltip-dark"}
                    });

                    $("#{{= controlId }}").attr("src", "{{= value }}");

                }).data("setValue", function(event){
                    $("#{{= controlId }}").attr("src", event.newValue);
                }).data("dispose", function(){
                    $("#{{= controlId }}_picker").qtip("destroy");
                });
        </script>
    </div>

    <div id="actionEditor-image" style="display: none">
        <img id="{{= controlId }}" src="" alt="{{= description }}" title="{{= description }}"/>

        <script type="text/javascript">
            $("#actionEditor-image")
                .data("init", function() {
                    var mediator = $("#{{= mediatorHolder }}").data("mediator");
                    $("#{{= controlId }}")
                        .click(function(){
                            mediator.executeCommand();
                        })
                        .attr("src", "{{= image }}");
                });
        </script>
    </div>

    <!--decorators-->
    <script src="js/mylibs/decorators/DebugDecorator.js"></script>
    <script src="js/mylibs/decorators/ActiveFrame.js"></script>
    <script src="js/mylibs/framework/SelectFrame.js"></script>
    <script src="js/mylibs/framework/DraggingElement.js"></script>
    <script src="js/mylibs/framework/View.js"></script>
    <script src="js/mylibs/framework/Page.js"></script>
    <script src="js/mylibs/framework/SelectComposite.js"></script>

    <script src="js/mylibs/framework/validation/Validator.js"></script>
    <script src="js/mylibs/framework/validation/MinMax.js"></script>

    <script src="js/mylibs/ui/Keyboard.js"></script>
    <script src="js/mylibs/ui/common/TextArea.js"></script>
    <script src="js/mylibs/ui/iphone/Def.js"></script>

    <script src="js/mylibs/ui/toolbox.js"></script>
    <script src="js/mylibs/ui/common/DockPannel.js"></script>
    <script src="js/mylibs/ui/iphone/phone.js"></script>
    <script src="js/mylibs/ui/Toolbar.js"></script>
    <script src="js/mylibs/ui/common/StackPanel.js"></script>
    <script src="js/mylibs/ui/common/Grid.js"></script>
    <script src="js/mylibs/ui/common/CheckBox.js"></script>
    <script src="js/mylibs/ui/common/ButtonBase.js"></script>
    <script src="js/mylibs/ui/iphone/phone.js"></script>
    <script src="js/mylibs/ui/iphone/BarItem.js"></script>
    <script src="js/mylibs/ui/iphone/PortraitPhone.js"></script>
    <script src="js/mylibs/ui/iphone/Toolbar.js"></script>
    <script src="js/mylibs/ui/iphone/TextBox.js"></script>
    <script src="js/mylibs/ui/iphone/Progressbar.js"></script>
    <script src="js/mylibs/ui/iphone/ActionSheet.js"></script>
    <script src="js/mylibs/ui/iphone/DisclosureButton.js"></script>
    <script src="js/mylibs/ui/iphone/Label.js"></script>
    <script src="js/mylibs/ui/iphone/Dialog.js"></script>
    <script src="js/mylibs/ui/dialogs/Confirmation.js"></script>
    <script src="js/mylibs/ui/iphone/TabbarItem.js"></script>
    <script src="js/mylibs/ui/iphone/Tabbar.js"></script>
    <script src="js/mylibs/ui/iphone/Picker.js"></script>
    <script src="js/mylibs/ui/iphone/Switch.js"></script>
    <script src="js/mylibs/ui/iphone/Slider.js"></script>
    <script src="js/mylibs/ui/iphone/SegmentedControlItem.js"></script>
    <script src="js/mylibs/ui/iphone/SegmentedControl.js"></script>
    <script src="js/mylibs/ui/iphone/TableView.js"></script>
    <script src="js/mylibs/ui/iphone/TextView.js"></script>
    <script src="js/mylibs/ui/iphone/Calendar.js"></script>
    <script src="js/mylibs/ui/iphone/Keyboard.js"></script>
    <script src="js/mylibs/ui/iphone/PageIndicator.js"></script>
    <script src="js/mylibs/ui/iphone/GoogleMap.js"></script>
    <script src="js/mylibs/ui/iphone/PinPoint.js"></script>
    <script src="js/mylibs/ui/iphone/Statusbar.js"></script>

    <script src="js/mylibs/ui/pages/iPhonePortraitPage.js"></script>

    <script src="js/mylibs/commands.js"></script>
    <script src="js/mylibs/ui/PropertyDesigner.js"></script>
    <script src="js/mylibs/ui/ActionDesigner.js"></script>
    <script src="js/mylibs/ui/ViewObserver.js"></script>
    <script src="js/mylibs/app.js"></script>

    <script src="test/TestBed.js"></script>
    <!-- end scripts-->

    <script type="text/javascript">
        $(document).ready(function(){
            $("#generateModel").click(function(){
                $("#model").val(App.Current.activePage.generateModel());
            });
            $('#zoom').change(function(event){
                var el = $(this)[0];
                var value = el.options[el.selectedIndex].value;
                App.Current.activePage.view.scale(value);
                App.Current.activePage.view.invalidate();
            });

            $(document.body).bind('mousewheel', function(e, delta){
                if(e.ctrlKey)
                {
                    var el = $('#zoom')[0];
                    var newIdx = el.selectedIndex + ~~(delta/Math.abs(delta));
                    if(newIdx < 0){
                        newIdx = 0;
                    }else if(newIdx >= el.options.length){
                        newIdx = el.options.length - 1;
                    }
                    var value = el.options[newIdx].value;
                    el.selectedIndex = newIdx;
                    App.Current.activePage.view.scale(value);
                    App.Current.activePage.view.invalidate();
                    if(e.preventDefault) e.preventDefault();
                    else e.returnValue=false;
                    return false;
                }
            });

            App.loaded.bind(function(){
                sketch.test.initializeTestBed($("#testBed_container"));
            });
        });
    </script>

</body>
</html>
